<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/Public/static/js/ztree/css/layuiStyle/layuiStyle.css" media="all" />
    <link rel="stylesheet" href="/Public/static/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/Public/static/css/public.css" media="all" />
</head>
<body class="childrenBody">
<form class="layui-form layui-form-pane" style="width:90%;padding-left:5%">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">角色组名 <b class="layui-red">*</b></label>
            <div class="layui-input-block">
                <input type="text" autocomplete="off" class="layui-input" maxlength="20" lay-verify="required" lay-Vertype="tips" name="title" placeholder="请输入角色组名">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="checkbox" value="1" lay-skin="switch" checked  lay-text="正常|停用" name="status">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <lable class="layui-form-label">描述</lable>
        <div class="layui-input-block">
            <input type="text" name="description" placeholder="角色组描述" autocomplete="off" class="layui-input" maxlength="200">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">权限选择</label>
        <div class="layui-input-block">
            <input type="checkbox" title="展开/收起" lay-filter="showall" class="showall" lay-skin="primary">
            <input type="checkbox" title="全选/全不选" lay-filter="hideall" class="hideall" lay-skin="primary">
        </div>
        <div class="layui-input-block">
            <ul id="tree" class="ztree" style="margin-left: 20px;"></ul>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="addData">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script type="text/javascript" src="/Public/static/js/jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="/Public/static/js/ztree/js/jquery.ztree.core.js?v=20011"></script>
<script type="text/javascript" src="/Public/static/js/ztree/js/jquery.ztree.excheck.js?v=20011"></script>
<script type="text/javascript" src="/Public/static/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['form','layer'],function(){
        var form = layui.form,
        layer = parent.layer === undefined ? layui.layer : top.layer;
        var v = '';
        var setting = {
            view: {
                showIcon: false
            },
            check: {
                enable: true,
                chkStyle:'checkbox',
                checkboxType: { "Y" : "ps", "N" : "ps" }
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onCheck: function () {
                    var treeObj = $.fn.zTree.getZTreeObj("tree"),
                        ns = treeObj.getCheckedNodes(true);
                    v = '';
                    for (var i = 0; i < ns.length; i++) {
                        v += ns[i].id + ",";
                    }
                }
            }
        };
        var nods = {$nodes};
        var tree = $.fn.zTree.init($("#tree"), setting, nods);
        tree.expandAll(true);
        var flag1 = false;
        form.on('checkbox(showall)',function(){
            tree.expandAll(flag1);
            flag1 = !flag1;
        });
        var flag2 = true;
        form.on('checkbox(hideall)',function(){
            tree.checkAllNodes(flag2);
            flag2 = !flag2;
        });
        form.on("submit(addData)",function(data){
            //弹出loading
            var treeObj = $.fn.zTree.getZTreeObj("tree"),
                ns = treeObj.getCheckedNodes(true);
            v = '';
            for (var i = 0; i < ns.length; i++) {
                v += ns[i].id + ",";
            }
            if(v.length  === 0){
                layer.msg('至少选择一个规则');
                return false;
            }
            var index = layer.msg('数据提交中，请稍候',{icon: 16,time:false});
            $.post("/admin/auth/add_group",{para:$('form').serialize(),'rules':v},function(res){
                layer.close(index);
                if(0 === res.code){
                    window.parent.window.parent.toast(res.info,0);
                    parent.layer.closeAll();
                    window.parent.tablist.reload();
                }else{
                    window.parent.window.parent.toast(res.info,1);
                }
            });
            return false;
        });
        var flag = true;
        form.on('checkbox(all_choose)',function(data){
            var ob = $(".rule");
            if(flag){
                ob.prop('checked',true);
                flag = false;
            }else{
                ob.prop('checked',false);
                flag = true;
            }
            form.render();
        });
        form.on('checkbox(fchoose)',function(data){
            var ob = $(".rule");
            ob.prop('checked',function(index,attr){
                return !attr;
            });
            form.render();
        });
    })
</script>
</body>
</html>